<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<counter v-model="count" v-model:msg="msg"></counter>
			<input type="text" v-model="count" />
		</div>
	</body>
</html>
<script>
	const counter = {
		props:{
			modelValue:Number,
			msg:String,
			modelModifiers:{
				default:()=>{return{}}
			}
		},
		methods:{
			changeCount(){
				let speed = 2;
				if(this.modelModifiers.aaa){
					speed = 5
				}
				this.$emit("update:modelValue",this.modelValue + speed)
				this.$emit('update:msg',this.msg + '?')
			}
		},
		template:
		`
			<div>子组件计数器:{{modelValue}}</div>
			<button @click="changeCount">修改count</button>
			<div>子组件提示信息:{{msg}}</div>
		`
	}
	
	const app = Vue.createApp({
		components:{counter},
		data(){
			return{
				count:0,
				msg:'提示：会计师大富科技'
			}
		}
	})
	const vm = app.mount('#app')
</script>